<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" class="fly-html-layui fly-html-store">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/front/layui/dist/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/public.css" media="all">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/front/css/global.css" charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/front/css/global(1).css" charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/front/css/store.css" charset="utf-8">
    <link rel="icon" href="${pageContext.request.contextPath}/statics/front/images/favicon.ico">
    <title>酒店—我的预定</title>
<body>
<!-- 顶部start -->
<div class="layui-header header header-store" style="background-color: #393D49;">
    <div class="layui-container">
        <a class="logo" href="index.html">
            <img src="${pageContext.request.contextPath}/statics/front/images/logo.png" alt="layui">
        </a>
        <div class="layui-form component" lay-filter="LAY-site-header-component"></div>
        <ul class="layui-nav" id="layui-nav-userinfo">
            <li data-id="index" class="layui-nav-item layui-hide-xs ">
                <a class="fly-case-active" data-type="toTopNav" href="/index.html">首页</a>
            </li>

            <c:if test="${sessionScope.loginUser ==null}">
                <li data-id="login" class="layui-nav-item layui-hide-xs ">
                    <a class="fly-case-active" data-type="toTopNav" href="/login.html">登录</a>
                </li>
                <li data-id="register" class="layui-nav-item layui-hide-xs ">
                    <a class="fly-case-active" data-type="toTopNav" href="/register.html">注册</a>
                </li>
            </c:if>
            <c:if test="${sessionScope.loginUser !=null}">
                <li data-id="room" class="layui-nav-item layui-hide-xs layui-this" >
                    <a class="fly-case-active" data-type="toTopNav" href="JavaScript:void(0);">我的预定</a>
                </li>
                <li data-id="" class="layui-nav-item layui-hide-xs ">
                    <span>欢迎您，尊贵的
                        <span style="color:#16b777">${sessionScope.loginUser.loginName}</span></span>
                </li>
                <li data-id="register" class="layui-nav-item layui-hide-xs ">
                    <a class="fly-case-active" data-type="toTopNav" href="/userinfo.html">我的信息</a>
                </li>
                <li data-id="register" class="layui-nav-item layui-hide-xs ">
                    <a class="fly-case-active" data-type="toTopNav" href="/user/logout">注销</a>
                </li>
            </c:if>

            <span class="layui-nav-bar" style="left: 560px; top: 55px; width: 0px; opacity: 0;"></span>
        </ul>
    </div>
</div>
<!-- 顶部end -->

<!-- 中间区域开始 -->
<div class="shop-nav shop-index">

    <!--搜索 end-->
    <div class="shop-banner">

        <!-- 酒店楼层开始 -->
        <div class="shop-temp" id="getIndexFloor">
                    <div class="temp-hot">
                        <div class="layui-container">
                            <p class="temp-title-cn"><span style="margin-left: -130px"></span>我的预定房间<span style="margin-left: 95px"></span></p>
                            <div class="layui-row layui-col-space20">

                                <c:forEach var="room" items="${roomList}">
                                    <div data-id="${room.id}" class="layui-col-xs6 layui-col-md3" lay-filter="data-edit-btn">
                                        <a class="template store-list-box fly-case-active" href="JavaScript:void(0);" data-type="toRoomInfo">
                                            <img src="/hotel/show/${room.photo}" class="store-list-cover">
                                            <h2 class="layui-elip">${room.typeName}</h2>
                                            <h3 class="layui-elip">我的预定姓名：${room.userName}</h3>
                                            <h3 class="layui-elip">我的预定留言：${room.userMsg}</h3>
                                            <p class="price"> <span title="金额"> ￥${room.price} </span> <span title="房号" style="color:  #fff;background: #0e88cc;padding: 3px;text-align: center;border: 1px solid #4cffb3;font-size: 13px;"> NO.${room.roomNo} </span></p>
                                        </a>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
        </div>
        <!-- 酒店楼层结束 -->

    </div>
</div>
<!-- 中间区域结束 -->

<!-- 底部 -->
<%-- 添加和修改窗口 --%>
<div style="display: none;padding: 5px" id="addOrUpdateWindow">
    <form class="layui-form" style="width:90%;" id="dataFrm" lay-filter="dataFrm">
        <!-- 隐藏域，保存房型id -->
        <input type="hidden" name="id">
        <div class="layui-col-md12 layui-col-xs12">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md9 layui-col-xs7">
                    <div class="layui-form-item magt3" style="margin-top: 8px;">
                        <label class="layui-form-label">房间编号</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="roomNo" lay-verify="required"  placeholder="暂无信息" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">房间类型</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="typeName" lay-verify="required"  placeholder="暂无信息" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">房间备注</label>
                        <div class="layui-input-block">
                            <textarea class="layui-textarea" name="remark" id="remark" readonly></textarea>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3 layui-col-xs5">
                    <div class="layui-upload-list thumbBox mag0 magt3">
                        <input type="hidden" name="photo" id="photo" value="">
                        <img class="layui-upload-img thumbImg" style="max-width: 100%;max-height: 100%;border: none;" id="uploadPhoto" src="/hotel/show/images/暂无图片.jpg">
                    </div>
                </div>
            </div>
            <div class="layui-form-item magb0">
                <div class="layui-inline">
                    <label class="layui-form-label">所属楼层</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="floorId" lay-verify="required"  placeholder="暂无信息" readonly>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">房间状态</label>
                    <div class="layui-input-inline">
                        <input type="hidden" class="layui-input" name="status" lay-verify="required"  placeholder="暂无信息" readonly>
                        <input type="text" class="layui-input" name="statusName" lay-verify="required"  placeholder="暂无信息" readonly>

                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房间要求</label>
                <div class="layui-input-block" >
                    <textarea id="roomRequirement" name="roomRequirement" class="layui-textarea" placeholder="暂无信息" readonly></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房间详情</label>
                <div class="layui-input-block">
                    <textarea id="roomDesc" name="roomDesc" class="layui-textarea" readonly></textarea>
                </div>
            </div>

            <div class="layui-form-item magt3" style="margin-top: 8px;">
                <label class="layui-form-label" style="color: #EF4E33">我的预定姓名</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="userName1" lay-verify="required"  placeholder="暂无信息" >
                </div>
            </div>
            <div class="layui-form-item magt3" style="margin-top: 8px;">
                <label class="layui-form-label" style="color: #EF4E33">我的预定留言</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="userMsg1" lay-verify="required"  placeholder="暂无信息" >
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block" style="text-align: center;">
                    <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit" id="doSubmit"><span
                            class="layui-icon layui-icon-close"></span>取消预定
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>


<!-- 脚本开始 -->
<script src="${pageContext.request.contextPath}/statics/layui/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/statics/front/layui/dist/layui.js"></script>
<script>
    layui.use(["form","element","carousel", 'table', 'laydate', 'jquery', 'layer','upload','layedit'], function () {
        var $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            upload = layui.upload,
            layedit = layui.layedit,
            layer = layui.layer,
            carousel = layui.carousel,
            table = layui.table;

        //渲染轮播图
        carousel.render({
            elem: '#LAY-store-banner'
            ,width: '100%' //设置容器宽度
            ,height: '460' //设置容器高度
            ,arrow: 'always' //始终显示箭头
        });
        var urlEdit,mainIndex;

        //展示房间数据
        $('[lay-filter="data-edit-btn"]').on('click', function(data) {
            var roomId = $(this).data('id');
            // 在这里编写点击事件的处理逻辑
            $.ajax({
                url: '/room/info',  // 请求的 URL
                method: 'GET',  // 请求方法，可以是 GET、POST、PUT、DELETE 等
                dataType: 'json',  // 服务器返回的数据类型，可以是 json、xml、html 等
                data: {  // 请求参数，如果不需要参数可以省略该字段
                    roomId: roomId,
                    // ...
                },
                success: function(response) {
                    // 请求成功的回调函数
                    console.log(response);
                    response.userMsg1 = response.userMsg;
                    response.userName1 = response.userName;
                    // 在这里处理返回的数据
                    openEditWindow(response)
                },
                error: function(xhr, status, error) {
                    // 请求失败的回调函数
                    console.log(error);
                    // 在这里处理错误信息
                }
            });

        });

        /**
         * 打开编辑窗口
         */
        function openEditWindow(data){
            mainIndex=layer.open({
                type:1,
                title:"预定房间",
                area:['800px','600px'],
                content:$("#addOrUpdateWindow"),
                success:function () {
                    urlEdit="/room/roll";
                    form.val("dataFrm",data);//表单数据回显
                    //给图片回显
                    if(data.photo==""||data.photo==null){
                        $("#uploadPhoto").attr("src","/hotel/show/images/暂无图片.jpg");
                    }else {
                        //照片回显
                        $("#uploadPhoto").attr("src","/hotel/show/"+data.photo);
                    }
                }
            })
        }

        //监听表单提交事件
        form.on("submit(doSubmit)",function (data) {
            var roomInfo = data.field;

            $.post(urlEdit,roomInfo,function(result){
                console.log(result)
                if (result.success){
                    // 获取具有指定 data-id 值的 div 元素

                    var divElement = document.querySelector("div[data-id='"+roomInfo.id+"']");
                    // 如果找到匹配的 div 元素，则删除它
                    if (divElement) {
                        divElement.remove();
                    }

                    layer.close(mainIndex);//关闭页面
                    layer.msg(result.message,{
                        icon:1
                    })
                }else{
                    layer.msg(result.message,{
                        icon:2
                    })
                }
            },"json");
            return false;
        })

    });

</script>
<!-- 脚本结束 -->
<ul class="layui-fixbar">
    <li class="layui-icon layui-fixbar-top" lay-type="top" style=""></li>
</ul>
<div class="layui-layer-move"></div>

</body>
</html>